<template>
  <div class="" v-loading="loading">
    <el-form
      ref="form"
      size="mini"
      :model="form"
      label-position="top"
      class="myform"
    >
      <div>
        <el-form-item label="店铺:" class="myform-item">
          <el-select
            v-model="form.sellerid"
            placeholder="请选择开具发票的店铺"
            clearable
          >
            <el-option
              v-for="item in shoplist"
              :key="item.sellerid"
              :label="item.sellertitle"
              :value="item.sellerid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单号:" class="myform-item">
          <el-input
            v-model="form.sourceidarr"
            placeholder="请输入订单号"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="买家昵称:" class="myform-item">
          <el-input
            v-model="form.buyername"
            placeholder="请输入买家昵称"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="抬头|税号:" class="myform-item">
          <el-input
            v-model="form.title"
            placeholder="请输入抬头或税号"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item style="margin: 36px 10px 0">
          <el-button type="primary" @click="onSearch">查询</el-button>
          <!-- <el-button type="primary" @click="onAdd">新增面料</el-button> -->
        </el-form-item>
        <el-form-item style="margin-top: 36px">
          <!-- <el-button type="primary" @click="onAdd">新增面料</el-button> -->
        </el-form-item>
      </div>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      height="460"
      @selection-change="handleSelectionChange"
      border
      size="mini"
    >
      <el-table-column type="selection" width="55" fixed v-if="type == 3">
      </el-table-column>
      <el-table-column width="60" align="center" fixed v-else>
        <template slot-scope="{ row }">
          <el-radio v-model="radioD" :label="row" @input="onInputDD"
            ><span style="visibility: hidden"></span
          ></el-radio>
        </template>
      </el-table-column>
      <el-table-column label="多合一列表" align="center">
        <template slot-scope="{ row }">
          <el-table
            ref="multipleTable"
            :data="row.list"
            style="width: 100%"
            border
            size="mini"
          >
            <el-table-column
              label="订单号"
              align="center"
              prop="sourceid"
              width="170"
              fixed
            >
            </el-table-column>
            <el-table-column
              label="订单状态"
              align="center"
              prop="order_status"
              width="100"
            >
            </el-table-column>
            <el-table-column
              label="任务状态"
              align="center"
              prop="status"
              width="100"
            >
              <template slot-scope="{ row }">
                <div
                  :style="{
                    color:
                      row.status == 1
                        ? '#67C23A'
                        : row.status == 2
                        ? '#E6A23C'
                        : row.status == 0
                        ? '#F56C6C'
                        : '',
                  }"
                >
                  {{
                    row.status == 1
                      ? "已完成"
                      : row.status == 0
                      ? "待处理"
                      : row.status == 2
                      ? "处理中"
                      : row.status == 3
                      ? "暂停中"
                      : ""
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="是否需开票"
              align="center"
              prop="is_status"
              width="100"
            >
              <template slot-scope="{ row }">
                <div
                  :style="{
                    color: row.hongchong_status == 1 ? '#999999' : '',
                  }"
                >
                  {{
                    row.hongchong_status == 1
                      ? "无需开票"
                      : row.hongchong_status == 2
                      ? "需开票"
                      : ""
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="后台发票状态"
              align="center"
              prop="invoicing_status"
              width="100"
            >
              <template slot-scope="{ row }">
                <div
                  :style="{
                    color:
                      row.invoicing_status == 1
                        ? '#67C23A'
                        : row.invoicing_status == 2
                        ? '#F56C6C'
                        : row.invoicing_status == 3
                        ? '#E6A23C'
                        : row.invoicing_status == 4
                        ? '#2c70d6'
                        : '',
                  }"
                >
                  {{
                    row.invoicing_status == 1
                      ? "已开票"
                      : row.invoicing_status == 2
                      ? "开票失败"
                      : row.invoicing_status == 3
                      ? "申请冲红"
                      : row.invoicing_status == 4
                      ? "冲红成功"
                      : row.invoicing_status == 5
                      ? "冲红失败"
                      : row.invoicing_status == 0
                      ? "未开票"
                      : ""
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="发票类型"
              align="center"
              prop="invoice_headerid"
              width="80"
            >
              <template slot-scope="{ row }">
                {{ row.invoice_headerid == 900 ? "个人" : "公司" }}
              </template>
            </el-table-column>

            <el-table-column label="开票信息" align="center">
              <el-table-column label="抬头/税号" align="center" width="250">
                <template slot-scope="{ row }">
                  {{ row.invoice_header || "--" }} /
                  {{ row.invoicing_number || "--" }}
                </template>
              </el-table-column>
              <el-table-column label="地址/电话" align="center" width="250">
                <template slot-scope="{ row }">
                  {{ row.opening_bank_address || "--" }} /
                  {{ row.opening_bank_tel || "--" }}
                </template>
              </el-table-column>
              <el-table-column label="开户行/账号" align="center" width="250">
                <template slot-scope="{ row }">
                  {{ row.opening_bank || "--" }} /
                  {{ row.opening_bank_number || "--" }}
                </template>
              </el-table-column>
              <el-table-column
                label="客服备注"
                align="center"
                prop="notes"
                width="100"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column
              label="电子邮箱"
              align="center"
              prop="email"
              width="160"
            >
            </el-table-column>
            <el-table-column
              label="店铺"
              align="center"
              prop="sellerid"
              width="140"
            >
              <template slot-scope="{ row }">
                {{ row.sellerid | shopfilters() }}
              </template>
            </el-table-column>
            <el-table-column label="买家昵称" align="center" prop="buyername">
            </el-table-column>
            <el-table-column label="实付金额" align="center" prop="pay_amount">
            </el-table-column>

            <el-table-column label="开票商品" align="center" width="1000">
              <template slot-scope="{ row }">
                <el-table border :data="row.order_detail" size="mini">
                  <el-table-column
                    label="子订单号"
                    align="center"
                    width="180"
                    prop="son_order_no"
                  >
                  </el-table-column>
                  <el-table-column
                    label="商品标题"
                    align="center"
                    prop="product_name"
                  >
                  </el-table-column>
                  <el-table-column label="购买数量" align="center" prop="num">
                  </el-table-column>
                  <el-table-column
                    label="子订单号实付金额"
                    align="center"
                    prop="pay_amount"
                  >
                  </el-table-column>
                  <el-table-column
                    label="货品编号"
                    align="center"
                    prop="sku_code"
                  >
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>

            <el-table-column
              label="创建人"
              align="center"
              prop="adduserid"
              width="100"
            >
            </el-table-column>

            <el-table-column
              label="执行人"
              align="center"
              prop="douserid"
              width="100"
            >
            </el-table-column>
            <el-table-column
              label="创建时间"
              align="center"
              prop="addtime"
              width="160"
            >
            </el-table-column>
            <el-table-column
              label="修改时间"
              align="center"
              prop="updatetime"
              width="160"
            >
            </el-table-column>
          </el-table> </template
      ></el-table-column>
    </el-table>
    <pagination
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postAdminMultiinOneInvoicelist"
    />
  </div>
</template>
    
  <script>
import { getStore } from "@/utils/localStorage.js";
import {
  postAdminMultiinOneInvoicelist,
  postAdminBanNiuGetInvoiceShop,
} from "@/api";
import pagination from "@/components/pagination.vue";
let that = this;
export default {
  components: { pagination },
  props: {
    type: "",
  },
  beforeCreate() {
    that = this;
  },
  filters: {
    shopfilters(val) {
      let shoplist = that.shoplist;
      let index = shoplist.map((item) => item.sellerid).indexOf(val);
      return shoplist[index].sellertitle;
    },
  },
  data() {
    return {
      loading: false,
      radioD: "",
      cities: [
        {
          label: "未开票",
          value: "0",
        },
        {
          label: "开票失败",
          value: "2",
        },
        {
          label: "已开票",
          value: "1",
        },
        {
          label: "申请冲红",
          value: "3",
        },
        {
          label: "已冲红",
          value: "4",
        },
        {
          label: "冲红失败",
          value: "5",
        },
      ],
      checkedCities: ["未开票", "开票失败"],
      shoplist: this.shoplist,
      form: {
        sellerid: "",
        sourceidarr: "",
        buyername: "",
        title: "",
        type: this.type,
        page: 1,
        size: 10,
      },
      tableData: [],
      total: 1,
      row: "",
      multipleSelection: [],
    };
  },

  async mounted() {
    let form = this.form;

    await this.postAdminBanNiuGetInvoiceShop();
    await this.postAdminMultiinOneInvoicelist(form);

    // this.userinfo = getStore("userinfo");
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable.doLayout();
    });
  },
  methods: {
    onInputDD(e) {
      this.$emit("onMultipleSelectionD", e);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let merge_tagarr = [];
      for (let index = 0; index < val.length; index++) {
        merge_tagarr.push(val[index].merge_tag);
      }
      this.$emit("onMultipleSelectionD", merge_tagarr);
    },

    // 店铺列表
    async postAdminBanNiuGetInvoiceShop() {
      let res = await postAdminBanNiuGetInvoiceShop();
      this.shoplist = res.data;
    },
    //

    // 列表
    async postAdminMultiinOneInvoicelist(data) {
      this.loading = true;
      let shoplist = this.shoplist;
      this.form = data;
      // data = JSON.parse(JSON.stringify(data));
      // let date = data.str_add_date;
      // if (date) {
      //     if (Array.isArray(date)) {
      //         data.str_add_date = date[0];
      //         data.end_add_date = date[1];
      //     }
      // } else {
      //     this.form.str_add_date = "";
      //     this.form.end_add_date = "";
      // }
      let datas = JSON.parse(JSON.stringify(data));
      let sourceidarr = datas.sourceidarr;
      if (sourceidarr) {
        datas.sourceidarr = sourceidarr.split(",");
      } else {
        datas.sourceidarr = [];
      }
      postAdminMultiinOneInvoicelist(datas)
        .then((res) => {
          this.loading = false;
          let data = res.data;

          //   for (let index = 0; index < data.length; index++) {
          //     console.log('data---->',data[index].sellerid);
          //     let index = shoplist
          //       .map((item) => item.sellerid)
          //       .indexOf(data[index].sellerid);
          //     data.shopname = shoplist[index].sellertitle;
          //   }

          this.tableData = data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 搜索
    onSearch() {
      this.form.page = 1;
      this.radioD = "";
      this.onInputDD("");
      this.postAdminMultiinOneInvoicelist(this.form);
    },
  },
};
</script>
    
  <style lang="scss" scoped>
.myform {
  display: flex;
  justify-content: space-between;

  > div {
    display: flex;
  }

  &-item {
    margin-right: 10px;
  }
}
</style>
    